<template>
  <div class="node-config-trigger-flow">
    <el-form
        :model="triggerFlow"
        size="small" label-width="100px" label-position="left">
      <el-form-item label="流程选择" width="120px">
        <el-select
            clearable
            v-model="triggerFlow.DataSourceId"
            placeholder="请选择流程"
            style="width: 90%"
        >
          <el-option
              v-for="item in AllFlows"
              :key="item.id"
              :label="item.Title"
              :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="执行类型" width="120px">
        <el-select
            clearable
            v-model="triggerFlow.OperationType"
            placeholder="请选择执行类型"
            style="width: 90%"
        >
          <el-option
              v-for="item in OperationTypes"
              :key="item.id"
              :label="item.label"
              :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
            v-model="triggerFlow.Desc"
            type="textarea"
            :rows="6"
            placeholder="请输入描述"
            style="width: 90%"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";

// @ts-ignore
import Utils from "@/vue2-flow/src/utils/Common";
import {MessageWarning} from "@/utils";
// @ts-ignore
import FlowNodeDataApi from '@/api/flow/FlowNodeDataApi.js'
import { AppParams } from '@/utils/appParams'

import {useFlowStore} from "@/store/modules/flow/flowStore";

const flowStore = useFlowStore()
const AllFlows = ref(flowStore.AllFlow)
const currentClickNode = flowStore.CurrentClickNode
const OperationTypes = [
  {
    id: 1, label: '执行流程'
  },
  {
    id: 0, label: '停止流程'
  }]

interface triggerFlowType {
  DataSourceId: Number,
  OperationType: Number,
  Desc: String
}

const triggerFlow = ref<triggerFlowType>({
  DataSourceId: 0,
  OperationType: 0,
  Desc: ''
})
const ShowNodeData = () => {
  SetFormValue(currentClickNode)
}
const SetFormValue = (_Node: any) => {
  let Flow = {
    DataSourceId: 0,
    OperationType: 0,
    Desc: ''
  }
  const InputParam = _Node?.nodeInputParam?.NodeLogic?.Flow?.InputParam
  const OperationType = _Node?.nodeInputParam?.NodeLogic?.Flow?.OperationType
  if (!Utils.IsEmpty(InputParam)) {
    Flow = {
      DataSourceId: InputParam.DataSourceId,
      OperationType: OperationType,
      Desc: _Node?.nodeInputParam?.Desc,
    }
  }
  triggerFlow.value = Flow
}

const _SaveNode = (NodeName: string) => {
  const _tf = triggerFlow.value
  if (Utils.IsEmpty(_tf.DataSourceId) || _tf.DataSourceId == 0) {
    return MessageWarning('请选择流程')
  }
  const params = {
    NodeLogic: {
      Flow: {
        InputParam: {
          DataSourceId: _tf.DataSourceId,
        },
        OperationType: _tf.OperationType
      }
    },
    Desc: _tf.Desc
  }
  new FlowNodeDataApi().Install(currentClickNode.id, params, NodeName)
}

onMounted(() => {
  ShowNodeData()
})
// 暴露方法，这样外部才能访问到
defineExpose({
  _SaveNode
});
</script>

<style scoped lang="scss">
.node-config-trigger-flow {

}
</style>
